<template>


  <center>
<!--    <h1>正文 解约协议查询ContractClosetList</h1>-->
    <div id="jieycha" style ="height: 1000px;width: 1000px;background-color: #42b983">
      <!--    list  list  list    listlist  list  list查询  st-->


      <!--    =======================模糊查-->

      <!--    =======================区间查-->




      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="解约协议编号">
          <el-input v-model="formInline.sfContractNo" placeholder="解约协议编号"></el-input>
        </el-form-item>


        <el-form-item label="录入人">
          <el-input v-model="formInline.operId" placeholder="录入人"></el-input>
        </el-form-item>

        <el-form-item label="小区名称">
          <el-input v-model="formInline.premiseName" placeholder="小区名称"></el-input>
        </el-form-item>




        <el-form-item label="协议收录日期">

          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>


          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date2" style="width: 100%;"></el-date-picker>
          </el-col>

        </el-form-item>








        <el-form-item>
          <el-button type="primary" @click="serarch">查询</el-button>
        </el-form-item>


      </el-form>

      <!--    list  list  list    listlist  list  list查询  ed-->




      <!--
          eid  解约合同编号
           小区
          edpart 解约类型


          egender 解约日期
          prid  审核日期
          ciid 结算金额


          arid 录入日期
          操作人
      -->


      <el-table
        :data="tableData"
        stripe
        style="width: 100%">


        <!--33333333333 3333333333 33333333333333333333  33333333333 3333333333 33333333333333333333 1-->
        <el-table-column
          prop="id"
          label="解约合同id"
          width="180">
        </el-table-column>



        <el-table-column
          prop="sfContractNo"
          label="解约合同编号"
          width="180">
        </el-table-column>



        <el-table-column
          prop="premiseName"
          label="小区">
        </el-table-column>-->


        <!--33333333333 3333333333 33333333333333333333  33333333333 3333333333 33333333333333333333 2-->
        <!--      <el-table-column-->
        <!--          prop="dname"-->
        <!--          label="解约类型"-->
        <!--          width="180">-->
        <!--      </el-table-column>-->


        <el-table-column
          prop="conAudTime"
          label="审核日期">
        </el-table-column>-->



        <!--      <el-table-column-->
        <!--          prop="dname"-->
        <!--          label="结算金额"-->
        <!--          width="180">-->
        <!--      </el-table-column>-->




        <!--33333333333 3333333333 33333333333333333333  33333333333 3333333333 33333333333333333333  3-->


        <el-table-column
          prop="conInfoTime"
          label="录入日期
        ">
        </el-table-column>



        <el-table-column
          prop="operId"
          label="操作人">
        </el-table-column>


      </el-table>


      <!--    =======================分页 分页 分页 分页 分页 分页 分页======================================-->


      <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"

          :current-page="current"
          :page-sizes="[3, 4, 5]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">


        </el-pagination>

      </div>
      <!--    =======================分页 分页 分页 分页 分页 分页 分页   end======================================-->
    </div>
  </center>
</template>


<script>
export default {
  name: "Jieycha",
  data() {
    return {
      tableData: [],
      current:1,
      size:3,
      total:0,
      formInline: {

      }
    }
  },created() {

    this.initData()

  },methods:
    {

      initData(){


        this.axios.get("http://localhost:9999/house-foreclosure/tSfContract/searchContractList",

          {
            params:{
              pageNum:this.current,
              pageSize:this.size,
              sfContractNo:this.formInline.sfContractNo,
              operId:this.formInline.operId,
              premiseName:this.formInline.premiseName,
              inputDateStart:this.formInline.date1,
              inputDateEnd:this.formInline.date2

            }
          }

        ).then((response) => {

          this.tableData=response.data.obj.list

          this.total=response.data.obj.total
        })

      },
      handleSizeChange(val) {
        this.size=val
        this.initData()
      },

      handleCurrentChange(val) {

        this.current=val
        this.initData()
      },

      serarch() {
        console.log('submit!');
        this.current=1
        this.initData()
      }


    }




}
</script>

<style scoped>

</style>

